<template>
	<view class="qh-search flex-cn" :style="customStyles">
		<text class="qh-rt-single before-search-icon" :class="icon"></text>
		<input v-model="inputValue" :type="type" class="input" @input="inputData" @focus="inputFocus" @blur="inputBlur" @confirm="search"
			:placeholder="placeholder" :border="border" :maxlength="-1" :style="inputStyles" :placeholder-style="placeholderStyles" placeholder-class="pl">
		<text v-show="isFocus&&inputValue!=''" class="qh-rt-single single-guanbi afiter-clear-icon" @click.stop="clear"></text>
	</view>
</template>

<script>
	export default {
		name: "qh-search",
		props: {
			value: {
				type: [String, Number],
				default: ''
			},
			icon: {
				type: String,
				default: 'single-sousuo'
			},
			bgColor: {
				type: String,
				default: ''
			}, //输入框背景颜色
			type: {
				type: String,
				default: 'text', //text number 
			},
			placeholder: {
				type: String,
				default: '',
			},
			border: {
				type: String,
				default: 'none',
			},
			maxlength: {
				type: [String, Number],
				default: -1,
			},
			fontSize: {
				type: [String, Number],
				default: 28
			}, //字体大小
			showWordLimit: {
				type: Boolean,
				default: false,
			},
			customStyle: {
				type: [String, Object],
				default () {
					return {}
				}
			},
			inputStyle: {
				type: [String, Object],
				default () {
					return {}
				}
			},
			placeholderStyle: {
				type: [String, Object],
				default () {
					return {}
				}
			},
		},
		emits: ['update:value', 'input', 'change', 'search', 'clear'],
		data() {
			return {
				inputValue: '',
				isFocus: false,
			}
		},
		computed: {
			customStyles() {
				let str = this.bgColor ? ('background-color:' + this.bgColor + ';') : '';
				return str + this.$joinStyle(this.customStyle)
			},
			inputStyles() {
				return this.getFontSize() + this.$joinStyle(this.inputStyle)
			},
			placeholderStyles() {
				return 'color: #B2B3B6;' + this.getFontSize() + this.$joinStyle(this.placeholderStyle)
			},
		},
		methods: {
			getFontSize() {
				return this.fontSize ? ('font-size:' + this.$getUnitSize(this.fontSize) + ';') : '';
			},
			inputData(e) {
				this.$emit('update:value', e.detail.value);
				this.$emit('input', e.detail.value);
				this.$emit('change', e.detail.value);
			},
			search() {
				this.inputBlur();
				this.$nextTick(() => {
					this.$emit('search');
				})
			},
			clear() {
				this.inputValue = '';
				this.inputData({
					detail: {
						value: ''
					}
				})
				this.$nextTick(() => {
					this.$emit('clear');
				})
			},
			inputFocus() {
				this.isFocus = true
			},
			inputBlur() {
				this.isFocus = false;
				if (this.maxlength != -1 && this.maxlength != '-1' && parseInt(this.maxlength) < String(this.inputValue).length) {
					this.inputValue = String(this.inputValue).substr(0, this.maxlength);
					this.$nextTick(() => {
						this.$emit('update:value', this.inputValue);
						this.$emit('input', this.inputValue);
						this.$emit('change', this.inputValue);
					})
				}
			},
		},
		created() {
			if (this.value) {
				this.inputValue = this.value
			}
		},
		watch: {
			value(n) {
				if (n != this.inputValue) {
					this.inputValue = n;
				}
			}
		}
	}
</script>

<style lang="scss">
	qh-search {
		flex: 1;
		height: 64rpx;
	}

	.qh-search {
		width: 100%;
		height: 64rpx;
		box-sizing: border-box;
		border-radius: 40rpx;
		background-color: #F2F3F5;
		padding: 0 28rpx;

		.before-search-icon {
			font-size: 28rpx;
			color: #C8C9CB;
			margin-right: 20rpx;
		}

		.afiter-clear-icon {
			font-size: 36rpx;
			color: #C8C9CB;
			padding: 10rpx;
			margin-right: -10rpx;
			margin-left: 20rpx;
		}

		.input {
			width: auto;
			flex: 1;
			font-size: 28rpx;
			color: #1e1e1e;
			height: 100%;
			line-height: 64rpx;
		}
	}
</style>
